<template>
  <div class="chartarea">
    <div id="environmentLinechart2" class="echart"></div>
  </div>
</template>

<script>
import echarts from "@/utils/lib/echarts";
import { LineChart } from "echarts/charts";
import { DataZoomComponent, MarkLineComponent } from "echarts/components";
echarts.use([LineChart, DataZoomComponent, MarkLineComponent]);
export default {
  name: "environmentLinechart2",
  props: {
    // 图数据
    chartData: {
      type: Object,
      default: {},
    },
    unit: {
      type: String,
      default: "%",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.getChartsdata(this.chartData);
  },
  beforeDestroy() {
    this.chartDes();
  },
  watch: {
    chartData: {
      handler(val) {
        if (val) {
          this.chartDes();
          this.getChartsdata(this.chartData);
        }
      },
      deep: false,
      immediate: false,
    },
  },
  methods: {
    chartDes() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    getChartsdata(chartData) {
      const that = this;
      let option = {
        title: {
          text: "空 气 质 量",
          subtext: "",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: chartData.xAxisData,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}" + this.unit,
          },
        },
        tooltip: {
          trigger: "axis",
          valueFormatter: function (value) {
            return value + that.unit;
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "15%",
          top: "15%",
          containLabel: true,
        },
        dataZoom: {
          type: "slider", // slider  inside
          show: true,
          zoomLock: false, // 如果设置为 true 只能平移，不能缩放
          // xAxisIndex: [0], // 控制哪个X轴 多个X轴的时候生效
          // bottom: -5, // slider生效
          start: 0,
          end: 100, //初始化滚动条
        },
        color: ["#2EC8CA"],
        series: [
          {
            name: "空气质量",
            data: chartData.seriesData,
            type: "line",
            symbol: "rect", //circle、rect、roundRect、roundRect、triangle、diamond、pin、arrow、none
            symbolSize: [16, 6],
            markLine: {
              lineStyle: {
                color: "#333",
              },
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    padding: [0, 0, 0, -300],
                    formatter: function (params) {
                      let str =
                        params.data.name == 0
                          ? "max"
                          : params.data.name == 2
                          ? "avg"
                          : params.data.name == 1
                          ? "min"
                          : "";
                      if (params.value > 0) {
                        return str + params.value;
                      } else {
                        return "";
                      }
                    },
                  },
                },
              },
              data: chartData.markLineData,
            },
          },
        ],
      };
      this.initChart("environmentLinechart2", option);
    },
    initChart(id, options) {
      this.chart = echarts.init(document.getElementById(id));
      this.chart.setOption(options);
      window.addEventListener("resize", () => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.chartarea {
  .echart {
    width: 100%;
    height: 280px;
  }
}
</style>
